<template>
    <div>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>当前账户</span>
                    </div>
                    <div>
                        <el-col :span="6" style="width:50%">
                            <p>管理人数： <span>0</span></p><br/>
                            <p>历史未执行人次： <span>0</span></p>
                        </el-col>
                        <el-col :span="6" style="width:50%">
                            <p>今日未执行人次： <span>0</span></p><br/>
                            <p>今日已执行人次： <span>0</span></p>
                        </el-col>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>汇总</span>
                    </div>
                    <div>
                        <el-col :span="6" style="width:50%">
                            <p>管理人数： <span>0</span></p><br/>
                            <p>历史未执行人次： <span>0</span></p>
                        </el-col>
                        <el-col :span="6" style="width:50%">
                            <p>今日未执行人次： <span>0</span></p><br/>
                            <p>今日已执行人次： <span>0</span></p>
                        </el-col>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>今日平台概况</span>
                    </div>
                    <div>
                        <el-col :span="3" style="width:25%">
                            <p>问卷评估 <span>0</span></p>
                        </el-col>
                        <el-col :span="3" style="width:25%">
                            <p>体检数据 <span>0</span></p>
                        </el-col>
                        <el-col :span="3" style="width:25%">
                            <p>干预方案 <span>0</span></p>
                        </el-col>
                        <el-col :span="3" style="width:25%">
                            <p>干预追踪 <span>0</span></p>
                        </el-col><br/>
                        <el-col :span="3" style="width:25%">
                            <p>预约人数 <span>0</span></p>
                        </el-col>
                        <el-col :span="3" style="width:25%">
                            <p>问卷评估 <span>0</span></p>
                        </el-col>
                        <el-col :span="3" style="width:25%">
                            <p>问卷评估 <span>0</span></p>
                        </el-col>
                        <el-col :span="3" style="width:25%">
                        </el-col>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>会员统计</span>
                    </div>
                    <div>
                            <el-col :span="4" style="width:33%">
                                    <p>今日新增会员 <span>0</span></p>
                                </el-col>
                                <el-col :span="4" style="width:33%">
                                    <p>今日登录会员 <span>0</span></p>
                                </el-col>
                                <el-col :span="4" style="width:33%">
                                 <p>会员总数 <span>0</span></p>
                                </el-col><hr/>
                            <el-col :span="4" style="width:33%">
                                <p>今日消费会员 <span>0</span></p>
                            </el-col>
                            <el-col :span="4" style="width:33%">
                                <p>会员消费总人数 <span>0</span></p>
                            </el-col>
                            <el-col :span="4" style="width:33%">
                                <p>今日充值金额 <span>0</span></p>
                            </el-col>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>待办任务</span>
                        <p style="float: right;">今日待随访/回访人数： <span>0</span>人次</p>
                    </div>
                    <div>
                        表格
                        <router-view></router-view>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>检测项目实时提醒</span>
                    </div>
                    <div>
                        分页表格
                        <router-view></router-view>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>